<template class="task-template">
  <section id="desktop-capturer-section" class="section js-section u-category-media">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-media"></use></svg>
          屏幕截图
        </h1>
        <h3> Electron 提供的 <code>desktopCapturer</code> 模块（理论上）可以访问任何媒体文件，比如音频，视频以及其他窗口，这些都要感谢Chromium提供的 web API <code>getUserMedia</code></h3>

        <p>详情查看 <a href="http://electron.atom.io/docs/api/desktop-capturer"> desktop-capturer模块<span class="u-visible-to-screen-reader">(在线文档)</span></a></p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="print-pdf-demo-toggle" class="js-container-target demo-toggle-button">截图
          <div class="demo-meta u-avoid-clicks">支持: Win, OS X, Linux | 进程: Renderer</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="screen-shot">点我截图</button>
            <span class="demo-response is-selectable" id="screenshot-path"></span>
          </div>
          <p>🌰 中调用<code>desktopCapturer</code> 模块对全屏做了个截图</p>
          <p>点击截图可以截图，同时会用系统默认应用打开这个截图</p>
          <h5>渲染进程</h5>
          <pre><code data-path="renderer-process/media/desktop-capturer.js"></pre></code>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/media/desktop-capturer')
    </script>

  </section>
</template>
